<script setup lang="ts">
  import { ref, defineEmits, onMounted, computed, watch } from 'vue';
  import { useBooleanStore } from '@/store';
  import { searchRole } from '@/api/platform-management';

  const emit = defineEmits(['updateArray']);
  const booleanStore = useBooleanStore();

  // 用户查询
  const username = ref<string>('');
  // 工号查询
  const text = ref<string>('');

  const pageSize = ref<number>(5);
  const pageNumber = ref<number>(1);

  // 发送搜索数据
  const flowQueryData = computed(() => ({
    pageSize: pageSize.value,
    curPageNum: pageNumber.value,
    text: text.value,
  }));
  // 表格数据
  async function handleSearch() {
    const newData = await searchRole(flowQueryData.value);
    emit('updateArray', newData);
  }
  // 重置
  function reset() {
    username.value = '';
    text.value = '';
    pageNumber.value = 1;
    handleSearch();
  }
  // 页面渲染时显示数据
  onMounted(() => {
    handleSearch();
  });
  // 监听分页
  watch([() => booleanStore.pageNum, () => booleanStore.pageSize], () => {
    if (booleanStore.num5 === 50) {
      pageNumber.value = booleanStore.pageNum;
      pageSize.value = booleanStore.pageSize;
      booleanStore.watchUpdate(24);
    }
  });
  watch(
    () => booleanStore.update,
    () => {
      if (booleanStore.num6 === 24) handleSearch();
    }
  );
</script>

<template>
  <a-row :gutter="{ md: 8, lg: 24, xl: 32 }">
    <!-- <a-col :span="12">
      <div>
        <a-input v-model="text" placeholder="角色名称" size="large" />
      </div>
    </a-col> -->
    <a-col :span="12">
      <div>
        <a-input v-model="text" placeholder="角色编码" size="large" />
      </div>
    </a-col>
  </a-row>

  <div class="btn-group">
    <a-button type="primary" size="large" @click="handleSearch">查询</a-button>
    <a-button class="btn-reset" size="large" @click="reset">重置</a-button>
    <a-button
      class="btn-reset"
      type="primary"
      size="large"
      @click="booleanStore.toggleBool(16)"
      >新增</a-button
    >
  </div>
</template>

<style scoped>
  .grid-demo {
    margin-top: 15px;
  }
  .btn-group {
    float: right;
    margin-top: 15px;
  }

  .btn-reset {
    margin-left: 10px;
  }
</style>
